import { CSSProperties, StyleValue, defineComponent } from "vue";
import style from "./index.module.less";
import { IButtonGroupData } from "./types";
import { Button } from "vant";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  name: "button-group",
  props: {
    data: {
      type: Array as () => IButtonGroupData[],
      default: () => [],
    },
  },
  setup(props) {
    return () => {
      function renderText(item: IButtonGroupData) {
        return (
          <div style={item.style} class="flex items-center justify-center">
            {item.name}
          </div>
        );
      }
      function renderButton(item: IButtonGroupData & { style: any }) {
        return (
          <Button
            plain={item.plain}
            type={item.type}
            round
            style={{
              height: getSize(42),
              minWidth: getSize(60),
              ...item.style,
            }}
            onClick={item.onClick}
          >
            {item.name}
          </Button>
        );
      }
      return (
        <div
          class={"flex items-center justify-between"}
          style={{ paddingLeft: getSize(0), paddingRight: getSize(0) }}
        >
          {props.data.map((e: any, i) => {
            return e.buttonType == "text"
              ? renderText(e)
              : renderButton(e as any);
          })}
        </div>
      );
    };
  },
});
